<template>
  <div class="home">
    <h2>Home View</h2>
    <h2>name：{{name}}</h2>
    <h2>age：{{age}}</h2>
    <h2>level：{{level}}</h2>
    <button @click="changeState">修改state</button>
    <button @click="resetState">重置state</button>
  </div>
</template>

<script setup>
  import useUser from '../stores/user.js'
  import {storeToRefs} from "pinia";
  const userStore=useUser()
  const {name,age,level} = storeToRefs(userStore)
  function changeState(){
    // // 1.一个个修改状态
    // userStore.name="kobe"
    // userStore.age=20
    // userStore.level=199

    // // 2.一次性修改多个状态
    // userStore.$patch({
    //   name:"james",
    //   age:35,
    //   level:99
    // })

    // 3.替换state为新的对象，发现原本的age被保留下来了。
    const oldState = userStore.$state // 保留一份oldState
    userStore.$state={
      name:"curry",
      level:9
    }
    // 看看是不是同一个对象
    console.log(oldState===userStore.$state) // => true 看来并不是替换，底层是如何操作的得去看源码。
  }
  function resetState(){
    userStore.$reset()
  }
</script>